<template>
  <el-tabs v-model="activeName" tab-position="top">
    <el-tab-pane label="属性" name="props"><Props /></el-tab-pane>
    <el-tab-pane label="样式" name="styles" v-if="editorStore.currentComponentId"><Styles /></el-tab-pane>
    <el-tab-pane label="事件" name="events" v-if="editorStore.currentComponentId"><Events /></el-tab-pane>
    <el-tab-pane label="代码" name="code" v-if="editorStore.currentComponentId"><Code /></el-tab-pane>
  </el-tabs> 
</template>

<script lang="ts" setup>
import Props from './components/props/index.vue';
import Styles from './components/styles/index.vue';
import Events from './components/events/index.vue';
import Code from './components/code/index.vue';

import useEditorStore from '@/store/modules/editor';
import { ref, watch } from 'vue';
const editorStore = useEditorStore();

defineOptions({
    name: "Right",
});

const activeName = ref('props');
watch(
  ()=> editorStore.currentComponentId,
  () => {
    activeName.value = "props";
  }
)
</script>

<style scoped lang="scss">
.el-tabs {
    height: calc(100vh - 50px);
    background-color: #fff;
}
:deep(.el-tabs__nav) {
  width: 100%;
  justify-content: space-around;
}
:deep(.el-tabs__header) {
  margin: 0;
}
</style>